import 'package:flutter/material.dart';

class CityPage extends StatefulWidget {
  @override
  _CityPageState createState() => _CityPageState();
}

class _CityPageState extends State<CityPage> with TickerProviderStateMixin {
  /// 动画控制器，动画持续时间5秒，可重复播放
  late final AnimationController _controllerants = AnimationController(
    duration: const Duration(seconds: 1),
    vsync: this,
  )..repeat(reverse: true);

  /// 缩小至 0.2倍大小，放大至3倍大小 非线性动画
  late final Animation<double> _animationstr =
  Tween<double>(begin: 1, end: 1.3).animate(
    CurvedAnimation(
      parent: _controllerants,
      curve: Curves.easeInCirc,
    ),
  );

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
    _controllerants.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: Container(
        color: Color.fromRGBO(83, 165, 108, 1),
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        child: ListView(
          children: [
            Container(
              alignment: Alignment.center,
              width: 300,
              height: 70,
              color: Color.fromRGBO(83, 165, 108, 1),
              child: Text(
                "通信大数据行程卡",
                style: TextStyle(
                    fontSize: 28,
                    fontWeight: FontWeight.w700,
                    color: Colors.white),
              ),
            ),
            Container(
              alignment: Alignment.center,
              width: 30,
              height: 30,
              color: Color.fromRGBO(83, 165, 108, 1),
              child: Text(
                "疫情防控,人人有责",
                style: TextStyle(
                    fontSize: 16,
                    fontWeight: FontWeight.w700,
                    color: Color.fromRGBO(255, 255, 255, 1)),
              ),
            ),
            Padding(
              padding: EdgeInsets.only(left: 25, right: 25),
              child: Container(
                width: MediaQuery.of(context).size.width,
                height: 368,
                color: Color.fromRGBO(83, 165, 108, 1),
                child: Container(
                  width: 200,
                  height: 300,
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(20),
                  ),
                  child: Stack(
                    alignment: AlignmentDirectional.topCenter,
                    children: [
                      Container(
                        width: MediaQuery.of(context).size.width,
                        height: 30,
                        decoration: BoxDecoration(
                          color: Color.fromRGBO(218, 238, 226, 1),
                          borderRadius: BorderRadius.only(
                            topLeft: Radius.circular(20),
                            topRight: Radius.circular(20),
                            bottomLeft: Radius.circular(0),
                            bottomRight: Radius.circular(0),
                          ),
                        ),
                      ),
                      Container(
                        alignment: Alignment.center,
                        width: MediaQuery.of(context).size.width,
                        height: 46,
                        child: Container(
                          width: 200,
                          height: 46,
                          decoration: BoxDecoration(
                            color: Color.fromRGBO(218, 238, 226, 1),
                            borderRadius: BorderRadius.only(
                              topLeft: Radius.circular(0),
                              topRight: Radius.circular(0),
                              bottomLeft: Radius.circular(22),
                              bottomRight: Radius.circular(22),
                            ),
                          ),
                        ),
                      ),
                      Positioned(
                        top: 10,
                        left: 95,
                        child: Container(
                            alignment: Alignment.center,
                            width: MediaQuery.of(context).size.width,
                            height: 30,
                            //color: Colors.yellow,
                            child: Row(
                              children: [
                                Text(
                                  "请收下绿色行程卡",
                                  textAlign: TextAlign.center,
                                  style: TextStyle(
                                      fontSize: 16,
                                      color: Color.fromRGBO(83, 165, 108, 1)),
                                )
                              ],
                            )),
                      ),
                      Positioned(
                        top: 65,
                        child: Container(
                          alignment: Alignment.center,
                          child: Text(
                            "139****5937的动态行程卡",
                            style: TextStyle(
                                fontSize: 16, fontWeight: FontWeight.w600),
                          ),
                        ),
                      ),
                      Positioned(
                        top: 95,
                        child: Container(
                          alignment: Alignment.center,
                          child: Text(
                            "更新于: " +
                                DateTime.now().toString().substring(0, 19),
                            style: TextStyle(
                                fontSize: 18,
                                fontWeight: FontWeight.w600,
                                color: Color.fromRGBO(150, 149, 156, 1)),
                          ),
                        ),
                      ),
                      Positioned(
                        top: 145,
                        child: ScaleTransition(
                          scale: _animationstr,
                          child: Container(
                            width: 140,
                            height: 140,
                            child: Image.asset(
                              "lib/assets/ykm/topykm.png",
                              fit: BoxFit.fill,
                            ),
                          ),
                        ),
                      ),
                      Positioned(
                        top: 310,
                        child: Container(
                          width: 235,
                          height: 2,
                          color: Color.fromRGBO(223, 223, 223, 1),
                        ),
                      ),
                      Positioned(
                        top: 320,
                        child: Container(
                          width: 240,
                          height: 46,
                          // child: Row(
                          //   children: [
                          //     Text(
                          //       "你于前7天内到达或途径: ",
                          //       style: TextStyle(
                          //           color: Color.fromRGBO(178, 177, 182, 1)),
                          //     ),
                          //     Text(
                          //       "广东省深圳市",
                          //       overflow: TextOverflow.clip,
                          //       style: TextStyle(
                          //           color: Color.fromRGBO(38, 38, 38, 1)),
                          //     ),
                          //   ],
                          // ),
                          child: RichText(
                              text: TextSpan(
                                  text: '你于前7天内到达或途径: ',
                                  style: TextStyle(
                                      color: Color.fromRGBO(178, 177, 182, 1),
                                      fontSize: 14,
                                      fontWeight: FontWeight.w600,
                                      height: 1.3),
                                  children: <TextSpan>[
                                    TextSpan(
                                        text: ' 广东省深圳市',
                                        style: TextStyle(
                                            color: Color.fromRGBO(38, 38, 38, 1))),
                                  ])),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ),
            Container(
              width: MediaQuery.of(context).size.width,
              height: 24,
              alignment: Alignment.center,
              child: Text(
                "结果包含您在前7天到访的国家 (地区) 与停留4小时以上的国内城市",
                style: TextStyle(fontSize: 10, color: Colors.white),
              ),
            ),
            Container(
              width: MediaQuery.of(context).size.width,
              height: 16,
              alignment: Alignment.center,
              child: Text(
                "色卡仅对到访地作提醒,不关联健康状况",
                style: TextStyle(fontSize: 10, color: Colors.white),
              ),
            ),
            Container(
                width: MediaQuery.of(context).size.width,
                height: 40,
                alignment: Alignment.center,
                // child: RichText(
                //     text: TextSpan(
                //         text: '————————————————',
                //         style: TextStyle(fontSize: 10, color: Colors.white),
                //         children: <TextSpan>[
                //       TextSpan(
                //         text: ' 本服务联合提供',
                //         style: TextStyle(fontSize: 10, color: Colors.white),
                //       ),
                //           TextSpan(
                //             text: ' ————————————————',
                //             style: TextStyle(fontSize: 10, color: Colors.white),
                //           ),
                //     ])),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Container(
                      width: 80,
                      height: 1,
                      color: Colors.white,
                    ),
                    Text(
                      "   本服务联合提供   ",
                      style: TextStyle(color: Colors.white),
                    ),
                    Container(
                      width: 80,
                      height: 1,
                      color: Colors.white,
                    ),
                  ],
                )),
            Container(
              width: MediaQuery.of(context).size.width,
              height: 30,
              child: Container(
                width: MediaQuery.of(context).size.width,
                height: 30,
                child: Image.asset(
                  "lib/assets/ykm/logo.png",
                  fit: BoxFit.fill,
                ),
              ),
            ),
            Container(
              width: MediaQuery.of(context).size.width,
              height: 90,
              alignment: Alignment.topCenter,
              color: Color.fromRGBO(83, 165, 108, 1),
              child: Text(
                "客服热线： 10000 / 10086 / 10010 / 10099",
                style: TextStyle(color: Colors.white, fontSize: 12),
              ),
            ),
          ],
        ),
      ),
    );
  }
}